<template>
  <div
    class="table-cell-buttons"
    :class="{
      vertical: direction === 'column'
    }"
  >
    <el-button
      v-for="(btn, index) in visibleButtons"
      :key="index"
      :type="btn.type || 'primary'"
      :size="btn.size || 'mini'"
      :plain="btn.plain || false"
      :round="btn.round || false"
      :icon="btn.icon || ''"
      @click="handleClick(btn, index)"
    >
      {{ btn.label }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: "TableCellButtons",
  props: {
    buttons: {
      type: Array,
      default: () => []
    },
    // 控制按钮排列方向：row 水平（默认），column 垂直
    direction: {
      type: String,
      default: "row"
    },
    // 当前用户的权限数组
    permissions: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    visibleButtons() {
      return this.buttons.filter(btn => {
        // 没配置 auth 的按钮默认显示
        if (!btn.auth) return true;
        // 有配置 auth，则必须在 permissions 里才显示
        return this.permissions.includes(btn.auth);
      });
    }
  },
  methods: {
    handleClick(btn, index) {
      if (typeof btn.onClick === "function") {
        btn.onClick();
      }
      this.$emit("click", { btn, index });
    }
  }
};
</script>

<style scoped>
.table-cell-buttons {
  display: flex;
  gap: 4px;
}
.table-cell-buttons.vertical {
  flex-direction: column;
  align-items: center;
}
</style>
